<%--
  Created by IntelliJ IDEA.
  User: zhaott
  Date: 2022/3/21
  Time: 9:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
        用户名：<input type="text" name="userName" id="userName"/>
                <span id="info"></span>
        <ul></ul>
        <p></p>
<script>
   /* //1、定义核心对象(goole浏览器或者版本比较新的浏览器这种方式都能识别)
    var xhr=new XMLHttpRequest();
    function checkName(){
        var name=document.getElementById("userName").value;
        //2、创建一个HTTP请求
        xhr.open("GET","/CheckNameServlet?userName="+name);
        //3、发送请求
        xhr.send();
        //4、根据响应状态码的值来判断是否获取数据,onreadystatechange事件检测状态码
        xhr.onreadystatechange=callback;


    }
    function callback(){
        if(xhr.readyState==4&&xhr.status==200){
            //获取响应的数据
            var info=xhr.responseText;
            if(info=="true"){
                document.getElementById("info").innerHTML="该用户名已被占用";
            }else{
                document.getElementById("info").innerHTML="该用户名可以占用";
            }
        }
    }*/
   $(function(){
       $.getJSON("${pageContext.request.contextPath}/topic?opr=list",
           function (data) {
               var list=data.list;
               $(list).each(function(m,n){
                   var str="<li>"+n.tname+ "</li>";
                   $("ul").append(str);
               })

           })
       //load它必须由某个元素调用，回调之后会把html响应给当前元素
       $("p").load("${pageContext.request.contextPath}/first");
   });
   $("#userName").blur(function () {
       var name=$(this).val();
       /*$.ajax({
           url:"/CheckNameServlet",
           type:"GET",
           data:{"userName":name},
           dataType:"text",
           success:function(data){
               if(data=="true"){
                   $("#info").html("该用户名已被占用");
               }else{
                   $("#info").html("该用户名可以占用");
               }
           }
       })*/


       $.post("${pageContext.request.contextPath}/CheckNameServlet",
           {"userName":name},function(data){
               if(data=="true"){
                   $("#info").html("该用户名已被占用");
               }else{
                   $("#info").html("该用户名可以占用");
               }
           })

   })

</script>
</body>
</html>
